<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
    <title>购物车</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <style>
    	.cart-item {
    		clear: both;
    		vertical-align: middle;
    		margin-top: 5px;
    		margin-bottom: 5px;
    		border-bottom: 1px solid #CCCCCC;
    	}
    	.scroll-data .cart-item:first-child {
    		padding-top: 5px;
    	}
    	.scroll-data .cart-item:last-child {
    		border-bottom: none;
    	}
    	.cart-item .thumbnail {
    		padding-right: 10px;
    		height: 100px;
    		line-height: 95px;
    		vertical-align: middle;
    	}
    	.cart-item .thumbnail img {
    		min-height: 50px;
    		max-width: 100%;
    		max-height: 100%;
    		vertical-align: middle;
    	}
    	.checkout-row {
    		position: fixed;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		background-color: #FFFFFF;
    		z-index: 999;
    	}
    	.checkout-row {
    		height: 45px;
    		line-height: 45px;
    	}
    	.checkout-row button {
    		margin-top: 6px;
    	}
    	.checkout-row .mui-checkbox>input {
    		top: 8px;
    	}
    	.mui-checkbox input[type=checkbox]:checked:before,
    	.mui-radio input[type=radio]:checked:before {
    		color: #FC3A2E;
    	}
		@-webkit-keyframes loading {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(359deg);
				transform: rotate(359deg);
			}
		}
		@keyframes loading {
			0% {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(359deg);
				transform: rotate(359deg);
			}
		}
		.mui-numbox {
			width: 150px;
		}
    	.mui-numbox button>i {
    		display: none;
    		-webkit-animation: loading 2s infinite linear;
    		animation: loading 2s infinite linear;
    	}
    	.mui-numbox button>span {
    		display: inherit;
    	}
    	.mui-numbox button[disabled]>i {
    		display: inherit;
    	}
    	.mui-numbox button[disabled]>span {
    		display: none;
    	}
    </style>
</head>
<body>
	<!--购物车数据列表 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh no-pad">
		<div class="mui-scroll">
			<!-- 顶部导航 开始 -->
			<header class="header mui-bar mui-bar-nav bar mui-text-center">
				<a class="mui-pull-left"></a>
				<a class="title">购物车</a>
			</header>
			<!-- 顶部导航 结束 -->
			<div class="pad-v-sm"></div>
			
			<!--数据列表-->
			<section class="mui-table-view mui-row scroll-data" data-tpl="tpl-cart">
			</section>
		</div>
	</div>
	<!--购物车数据列表 结束-->
	
	<div class="mui-row checkout-row">
		<div class="mui-col-xs-4">
			<div class="mui-input-row mui-checkbox mui-left">
				<label>全选</label>
				<input name="cart-select-all" value="1" type="checkbox">
			</div>
		</div>
		<div class="mui-col-xs-8">
			<div class="mui-row">
				<div class="mui-col-xs-7">
					合计：<span class="text-primary cart-total">￥0.00</span>
				</div>
				<div class="mui-col-xs-5 h-full">
					<button type="button" class="mui-btn mui-btn-danger mui-pull-right mgn-h-md btn-go-checkout">去结算</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 购物车商品模板 开始 -->
	<script type="text/html" id="tpl-cart">
		{{each data as item}}
		<div class="mui-row cart-item white" data-cart="{{item.cart_id}}" data-product="{{item.goods_id}}" data-price="{{item.goods_price}}" data-max="{{item.goods_storage}}">
			<div class="mui-col-xs-2">
				<div class="mui-input-row mui-checkbox mgn-v-lg pad-v">
					<label> </label>
					<input name="product" type="checkbox">
				</div>
			</div>
			<div class="mui-col-xs-3 thumbnail">
				<img src="{{item.thumb | thumb}}" />
			</div>
			<div class="mui-col-xs-7 pad-v-sm">
				<div>{{item.title}}</div>
				<div class="mgn-v-sm">
					<span class="text-primary">￥{{item.goods_price | price}}</span>
					<span class="mui-pull-right pad-h-md btn-trash">
						<i class="iconfont icon-trash"></i>
					</span>
				</div>
				<div class="mui-numbox" data-numbox-min="1">
					<!-- "-"按钮，点击可减小当前数值 -->
					<button class="mui-btn mui-numbox-btn-minus" type="button">
						<i class="icon iconfont icon-loading"></i>
						<span>-</span>
					</button>
					<input class="mui-numbox-input" type="number" name="quantity" value="{{item.goods_num}}" data-quantity="{{item.goods_num}}" />
					<!-- "+"按钮，点击可增大当前数值 -->
					<button class="mui-btn mui-numbox-btn-plus" type="button">
						<i class="icon iconfont icon-loading"></i>
						<span>+</span>
					</button>
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 购物车商品模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
  <script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="cart.js" ></script>
</body>
</html>